<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交论坛推荐</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #3B82F6;
            --primary-light: #93C5FD;
            --primary-dark: #1D4ED8;
            --secondary: #6366F1;
            --success: #10B981;
            --warning: #F59E0B;
            --danger: #EF4444;
            --gray: #6B7280;
            --light-gray: #F3F4F6;
            --dark-gray: #374151;
            --text-dark: #1F2937;
            --text-light: #F9FAFB;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --radius: 8px;
            --transition: all 0.25s ease;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F9FAFB;
            color: var(--text-dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
        }
        
        .section-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.75rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background-color: var(--primary);
            border-radius: 3px;
        }
        
        .forum-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: var(--transition);
            margin-bottom: 1.5rem;
        }
        
        .forum-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .forum-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--light-gray);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
            margin: 0;
        }
        
        .post-time {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
        }
        
        .forum-content {
            padding: 1.25rem;
        }
        
        .forum-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            transition: var(--transition);
        }
        
        .forum-title:hover {
            color: var(--primary);
        }
        
        .forum-text {
            color: var(--dark-gray);
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .forum-media {
            margin-bottom: 1rem;
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .media-single {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }
        
        .media-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
        }
        
        .media-grid img {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }
        
        .media-grid img:nth-child(1) {
            grid-column: span 2;
            grid-row: span 2;
            height: 244px;
        }
        
        .forum-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1.25rem;
            border-top: 1px solid var(--light-gray);
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .action-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            transition: var(--transition);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }
        
        .action-item:hover {
            background-color: var(--light-gray);
            color: var(--primary);
        }
        
        .action-item.liked {
            color: var(--danger);
        }
        
        .action-item.saved {
            color: var(--primary);
        }
        
        /* 布局变体 */
        .list-layout .forum-card {
            display: flex;
            flex-direction: row;
            height: 200px;
        }
        
        .list-layout .forum-media {
            width: 30%;
            margin: 0;
            border-radius: var(--radius) 0 0 var(--radius);
        }
        
        .list-layout .media-single {
            height: 100%;
            border-radius: var(--radius) 0 0 var(--radius);
        }
        
        .list-layout .forum-body {
            width: 70%;
            display: flex;
            flex-direction: column;
        }
        
        .list-layout .forum-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-layout .forum-text {
            flex: 1;
        }
        
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .featured-layout .forum-card {
            border-radius: var(--radius);
            overflow: hidden;
        }
        
        .featured-layout .forum-media {
            margin: 0;
        }
        
        .featured-layout .media-single {
            height: 300px;
        }
        
        .featured-layout .forum-content {
            padding: 1.5rem;
        }
        
        .featured-layout .forum-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .featured-layout .forum-text {
            font-size: 1.05rem;
            -webkit-line-clamp: 3;
            margin-bottom: 1.5rem;
        }
        
        .compact-layout .forum-card {
            padding: 1rem;
        }
        
        .compact-layout .forum-header {
            padding: 0 0 0.5rem 0;
            border: none;
        }
        
        .compact-layout .forum-content {
            padding: 0.5rem 0;
        }
        
        .compact-layout .forum-title {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        
        .compact-layout .forum-text {
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        
        .compact-layout .forum-actions {
            padding: 0.5rem 0 0 0;
            border: none;
        }
        
        .nav-tabs {
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .nav-tabs .nav-link {
            color: var(--gray);
            font-weight: 500;
            border: none;
            border-bottom: 2px solid transparent;
            padding: 0.75rem 1.25rem;
            transition: var(--transition);
        }
        
        .nav-tabs .nav-link.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            background-color: transparent;
        }
        
        .nav-tabs .nav-link:hover:not(.active) {
            color: var(--dark-gray);
            border-bottom: 2px solid var(--light-gray);
            background-color: transparent;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .list-layout .forum-card {
                flex-direction: column;
                height: auto;
            }
            
            .list-layout .forum-media,
            .list-layout .forum-body {
                width: 100%;
            }
            
            .list-layout .media-single {
                border-radius: var(--radius) var(--radius) 0 0;
            }
        }
        
        @media (max-width: 768px) {
            .section-title {
                font-size: 1.5rem;
            }
            
            .featured-layout .media-single {
                height: 220px;
            }
            
            .media-grid img {
                height: 90px;
            }
            
            .media-grid img:nth-child(1) {
                height: 184px;
            }
        }
        
        @media (max-width: 576px) {
            .forum-actions {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .action-item {
                flex: 1;
                justify-content: center;
            }
            
            .media-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .media-grid img:nth-child(1) {
                grid-column: span 1;
                grid-row: span 1;
                height: 90px;
            }
        }
    </style>
</head>
<body>
    <div class="container py-5 px-4">
        <!-- 导航标签 -->
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">推荐论坛</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">热门讨论</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">最新发布</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">已收藏</a>
            </li>
        </ul>
        
        <!-- 精选论坛区 -->
        <section class="mb-8">
            <h2 class="section-title">精选推荐</h2>
            <div class="featured-layout">
                <div class="forum-card">
                    <div class="forum-media">
                        <img src="https://picsum.photos/id/1048/1200/300" alt="自然风光论坛封面" class="media-single">
                    </div>
                    <div class="forum-header">
                        <img src="https://picsum.photos/id/64/40/40" alt="旅行家小明的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">旅行家小明</p>
                            <p class="post-time">发布于 3天前 · 旅行摄影论坛</p>
                        </div>
                    </div>
                    <div class="forum-content">
                        <h3 class="forum-title">
                            <a href="#" class="text-decoration-none text-dark">探索世界十大绝美自然景观，每一处都让人心醉</a>
                        </h3>
                        <p class="forum-text">
                            大自然的鬼斧神工总是能创造出令人惊叹的美景。从壮丽的山脉到神秘的森林，从浩瀚的海洋到奇幻的沙漠，这个世界充满了值得我们探索的角落。本文将带您领略十大绝美自然景观，每一处都有其独特的魅力，让人流连忘返。无论是摄影爱好者还是旅行达人，这些地方都绝对值得一去...
                        </p>
                    </div>
                    <div class="forum-actions">
                        <div class="action-item">
                            <i class="far fa-eye"></i>
                            <span>2.4k</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-comment"></i>
                            <span>156</span>
                        </div>
                        <div class="action-item liked">
                            <i class="fas fa-heart"></i>
                            <span>892</span>
                        </div>
                        <div class="action-item saved">
                            <i class="fas fa-bookmark"></i>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 列表布局论坛区 -->
        <section class="mb-8">
            <h2 class="section-title">热门讨论</h2>
            <div class="list-layout">
                <!-- 带单张图片的论坛 -->
                <div class="forum-card">
                    <div class="forum-media">
                        <img src="https://picsum.photos/id/26/400/300" alt="科技产品评测" class="media-single">
                    </div>
                    <div class="forum-body">
                        <div class="forum-header">
                            <img src="https://picsum.photos/id/91/40/40" alt="科技达人老王的头像" class="author-avatar">
                            <div class="author-info">
                                <p class="author-name">科技达人老王</p>
                                <p class="post-time">发布于 昨天 · 数码科技论坛</p>
                            </div>
                        </div>
                        <div class="forum-content">
                            <h3 class="forum-title">
                                <a href="#" class="text-decoration-none text-dark">2023年最新旗舰手机横评：谁才是真正的机皇？</a>
                            </h3>
                            <p class="forum-text">
                                今年各大手机厂商都推出了自家的旗舰产品，从性能到拍照，从屏幕到续航，每款手机都有其亮点。本文将对市场上主流的几款旗舰手机进行全面评测，包括iPhone 14 Pro、三星Galaxy S23 Ultra、小米13 Pro等，从多个维度进行打分，帮助您做出最适合自己的选择...
                            </p>
                        </div>
                        <div class="forum-actions">
                            <div class="action-item">
                                <i class="far fa-eye"></i>
                                <span>5.7k</span>
                            </div>
                            <div class="action-item">
                                <i class="far fa-comment"></i>
                                <span>328</span>
                            </div>
                            <div class="action-item">
                                <i class="far fa-heart"></i>
                                <span>456</span>
                            </div>
                            <div class="action-item">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的论坛 -->
                <div class="forum-card">
                    <div class="forum-body" style="width: 100%;">
                        <div class="forum-header">
                            <img src="https://picsum.photos/id/65/40/40" alt="经济分析师李婷的头像" class="author-avatar">
                            <div class="author-info">
                                <p class="author-name">经济分析师李婷</p>
                                <p class="post-time">发布于 2天前 · 财经论坛</p>
                            </div>
                        </div>
                        <div class="forum-content">
                            <h3 class="forum-title">
                                <a href="#" class="text-decoration-none text-dark">后疫情时代全球经济复苏趋势分析与展望</a>
                            </h3>
                            <p class="forum-text">
                                随着全球疫情逐渐得到控制，各国经济开始呈现复苏迹象，但复苏速度和程度存在显著差异。本文将从多个角度分析当前全球经济形势，探讨不同行业的复苏前景，以及投资者应该关注的机遇与风险。同时，我们也将对未来1-2年的经济走势做出预测，为企业和个人提供参考...
                            </p>
                        </div>
                        <div class="forum-actions">
                            <div class="action-item">
                                <i class="far fa-eye"></i>
                                <span>3.2k</span>
                            </div>
                            <div class="action-item">
                                <i class="far fa-comment"></i>
                                <span>215</span>
                            </div>
                            <div class="action-item liked">
                                <i class="fas fa-heart"></i>
                                <span>678</span>
                            </div>
                            <div class="action-item">
                                <i class="far fa-bookmark"></i>
                                <span>收藏</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 带多张图片的论坛 -->
                <div class="forum-card">
                    <div class="forum-media">
                        <div class="media-grid">
                            <img src="https://picsum.photos/id/42/400/400" alt="美食图片1">
                            <img src="https://picsum.photos/id/43/200/200" alt="美食图片2">
                            <img src="https://picsum.photos/id/45/200/200" alt="美食图片3">
                            <img src="https://picsum.photos/id/48/200/200" alt="美食图片4">
                        </div>
                    </div>
                    <div class="forum-body">
                        <div class="forum-header">
                            <img src="https://picsum.photos/id/22/40/40" alt="美食博主阿强的头像" class="author-avatar">
                            <div class="author-info">
                                <p class="author-name">美食博主阿强</p>
                                <p class="post-time">发布于 5天前 · 美食论坛</p>
                            </div>
                        </div>
                        <div class="forum-content">
                            <h3 class="forum-title">
                                <a href="#" class="text-decoration-none text-dark">探寻城市隐藏的美食宝藏，这10家小店你不能错过</a>
                            </h3>
                            <p class="forum-text">
                                在繁华的都市中，总有一些不起眼的小店，却藏着令人难忘的美味。本文将带您探访10家隐藏在城市角落的美食宝藏，从传统小吃到创新料理，每一家都有其独特的风味和故事。这些小店或许没有华丽的装修，但却用最真诚的味道打动了无数食客...
                            </p>
                        </div>
                        <div class="forum-actions">
                            <div class="action-item">
                                <i class="far fa-eye"></i>
                                <span>4.8k</span>
                            </div>
                            <div class="action-item">
                                <i class="far fa-comment"></i>
                                <span>189</span>
                            </div>
                            <div class="action-item">
                                <i class="far fa-heart"></i>
                                <span>923</span>
                            </div>
                            <div class="action-item saved">
                                <i class="fas fa-bookmark"></i>
                                <span>收藏</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 网格布局论坛区 -->
        <section class="mb-8">
            <h2 class="section-title">兴趣推荐</h2>
            <div class="grid-layout">
                <!-- 网格项1 - 单图 -->
                <div class="forum-card">
                    <div class="forum-media">
                        <img src="https://picsum.photos/id/96/600/400" alt="健身论坛封面" class="media-single">
                    </div>
                    <div class="forum-header">
                        <img src="https://picsum.photos/id/177/40/40" alt="健身教练大鹏的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">健身教练大鹏</p>
                            <p class="post-time">1周前 · 健身论坛</p>
                        </div>
                    </div>
                    <div class="forum-content">
                        <h3 class="forum-title">
                            <a href="#" class="text-decoration-none text-dark">初学者健身指南：如何科学制定训练计划</a>
                        </h3>
                        <p class="forum-text">
                            对于健身初学者来说，制定一个科学合理的训练计划至关重要。本文将介绍如何根据自身情况设定健身目标，如何安排训练频率和强度，以及如何平衡力量训练和有氧运动...
                        </p>
                    </div>
                    <div class="forum-actions">
                        <div class="action-item">
                            <i class="far fa-eye"></i>
                            <span>1.2k</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-comment"></i>
                            <span>87</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-heart"></i>
                            <span>342</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-bookmark"></i>
                            <span></span>
                        </div>
                    </div>
                </div>
                
                <!-- 网格项2 - 无图 -->
                <div class="forum-card">
                    <div class="forum-header">
                        <img src="https://picsum.photos/id/342/40/40" alt="读书爱好者小雅的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">读书爱好者小雅</p>
                            <p class="post-time">3天前 · 文学论坛</p>
                        </div>
                    </div>
                    <div class="forum-content">
                        <h3 class="forum-title">
                            <a href="#" class="text-decoration-none text-dark">2023年必读书单推荐：10本改变思维的好书</a>
                        </h3>
                        <p class="forum-text">
                            阅读是拓展视野、提升认知的最佳方式之一。在这快节奏的时代，我们更需要静下心来阅读一些有深度的书籍。本文推荐的10本书涵盖了文学、哲学、心理学等多个领域...
                        </p>
                    </div>
                    <div class="forum-actions">
                        <div class="action-item">
                            <i class="far fa-eye"></i>
                            <span>2.1k</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-comment"></i>
                            <span>156</span>
                        </div>
                        <div class="action-item liked">
                            <i class="fas fa-heart"></i>
                            <span>567</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-bookmark"></i>
                            <span></span>
                        </div>
                    </div>
                </div>
                
                <!-- 网格项3 - 多图 -->
                <div class="forum-card">
                    <div class="forum-media">
                        <div class="media-grid">
                            <img src="https://picsum.photos/id/164/400/400" alt="摄影作品1">
                            <img src="https://picsum.photos/id/165/200/200" alt="摄影作品2">
                            <img src="https://picsum.photos/id/167/200/200" alt="摄影作品3">
                        </div>
                    </div>
                    <div class="forum-header">
                        <img src="https://picsum.photos/id/349/40/40" alt="摄影师阿明的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">摄影师阿明</p>
                            <p class="post-time">5天前 · 摄影论坛</p>
                        </div>
                    </div>
                    <div class="forum-content">
                        <h3 class="forum-title">
                            <a href="#" class="text-decoration-none text-dark">街头摄影技巧：如何捕捉城市中的精彩瞬间</a>
                        </h3>
                        <p class="forum-text">
                            街头摄影是最具挑战性也最具魅力的摄影类型之一。它要求摄影师具备敏锐的观察力和快速反应能力，能够在瞬息万变的街头捕捉到那些真实而动人的瞬间...
                        </p>
                    </div>
                    <div class="forum-actions">
                        <div class="action-item">
                            <i class="far fa-eye"></i>
                            <span>1.8k</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-comment"></i>
                            <span>98</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-heart"></i>
                            <span>421</span>
                        </div>
                        <div class="action-item saved">
                            <i class="fas fa-bookmark"></i>
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 紧凑布局论坛区 -->
        <section>
            <h2 class="section-title">最新发布</h2>
            <div class="compact-layout">
                <!-- 紧凑项1 -->
                <div class="forum-card">
                    <div class="forum-header">
                        <img src="https://picsum.photos/id/399/40/40" alt="游戏玩家小李的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">游戏玩家小李</p>
                            <p class="post-time">2小时前 · 游戏论坛</p>
                        </div>
                    </div>
                    <div class="forum-content">
                        <h3 class="forum-title">
                            <a href="#" class="text-decoration-none text-dark">《艾尔登法环》DLC"黄金树之影"体验评测：值得入手吗？</a>
                        </h3>
                        <p class="forum-text">
                            期待已久的《艾尔登法环》DLC终于上线了，本文将从新地图设计、BOSS战难度、剧情补充等方面进行详细评测...
                        </p>
                    </div>
                    <div class="forum-actions">
                        <div class="action-item">
                            <i class="far fa-eye"></i>
                            <span>356</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-comment"></i>
                            <span>42</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-heart"></i>
                            <span>89</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
                
                <!-- 紧凑项2 -->
                <div class="forum-card">
                    <div class="forum-header">
                        <img src="https://picsum.photos/id/453/40/40" alt="音乐爱好者阿哲的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">音乐爱好者阿哲</p>
                            <p class="post-time">5小时前 · 音乐论坛</p>
                        </div>
                    </div>
                    <div class="forum-content">
                        <h3 class="forum-title">
                            <a href="#" class="text-decoration-none text-dark">2023年度十大专辑盘点：从流行到摇滚的精彩之作</a>
                        </h3>
                        <p class="forum-text">
                            2023年涌现了许多优秀的音乐作品，本文将为大家盘点今年最值得一听的十张专辑，涵盖流行、摇滚、嘻哈等多种风格...
                        </p>
                    </div>
                    <div class="forum-actions">
                        <div class="action-item">
                            <i class="far fa-eye"></i>
                            <span>782</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-comment"></i>
                            <span>103</span>
                        </div>
                        <div class="action-item liked">
                            <i class="fas fa-heart"></i>
                            <span>256</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
                
                <!-- 紧凑项3 -->
                <div class="forum-card">
                    <div class="forum-header">
                        <img src="https://picsum.photos/id/535/40/40" alt="电影评论家老张的头像" class="author-avatar">
                        <div class="author-info">
                            <p class="author-name">电影评论家老张</p>
                            <p class="post-time">昨天 · 电影论坛</p>
                        </div>
                    </div>
                    <div class="forum-content">
                        <h3 class="forum-title">
                            <a href="#" class="text-decoration-none text-dark">从《奥本海默》看诺兰的电影叙事风格演变</a>
                        </h3>
                        <p class="forum-text">
                            诺兰新作《奥本海默》上映后引发广泛讨论，本文将从叙事结构、视觉风格、主题表达等方面分析诺兰的电影风格演变...
                        </p>
                    </div>
                    <div class="forum-actions">
                        <div class="action-item">
                            <i class="far fa-eye"></i>
                            <span>1.2k</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-comment"></i>
                            <span>87</span>
                        </div>
                        <div class="action-item">
                            <i class="far fa-heart"></i>
                            <span>321</span>
                        </div>
                        <div class="action-item saved">
                            <i class="fas fa-bookmark"></i>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-item:not(.saved) .fa-heart').forEach(icon => {
                icon.parentElement.addEventListener('click', function() {
                    const countElement = this.querySelector('span');
                    let count = parseInt(countElement.textContent);
                    
                    if (this.classList.contains('liked')) {
                        // 取消点赞
                        this.classList.remove('liked');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        countElement.textContent = (count - 1).toString();
                    } else {
                        // 点赞
                        this.classList.add('liked');
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        countElement.textContent = (count + 1).toString();
                    }
                });
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.action-item:has(.fa-bookmark)').forEach(button => {
                const icon = button.querySelector('.fa-bookmark');
                
                button.addEventListener('click', function() {
                    if (this.classList.contains('saved')) {
                        // 取消收藏
                        this.classList.remove('saved');
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    } else {
                        // 收藏
                        this.classList.add('saved');
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    }
                });
            });
            
            // 导航标签切换
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活跃状态
                    navLinks.forEach(l => l.classList.remove('active'));
                    
                    // 添加当前活跃状态
                    this.classList.add('active');
                    
                    // 在实际应用中，这里会加载对应标签的内容
                    const tabName = this.textContent.trim();
                    console.log(`切换到 ${tabName} 标签`);
                });
            });
        });
    </script>
</body>
</html>

